<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drag-interact</title>
    <script src="../javascripts/interact.js"></script>
</head>
<style>
    #drag-1, #drag-2 {
        width: 50px;
        height: 50px;
        min-height: 6.5em;
        margin: 10%;

        background-color: #29e;
        color: white;

        border-radius: 0.75em;
        padding: 4%;

        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    #drag-me::before {
        content: "#" attr(id);
        font-weight: bold;
    }
</style>
<body>
<div id="drag-1" class="draggable">
    <p> You can drag one element </p>
</div>
<div id="drag-2" class="draggable">
    <p> with each pointer </p>
</div>
</body>
</html>
<script>
    // target elements with the "draggable" class
    interact('.draggable')
        .draggable({
            // enable inertial throwing
            inertia: true,
            // keep the element within the area of it's parent
            restrict: {
                restriction: "parent",
                endOnly: true,
                elementRect: {top: 0, left: 0, bottom: 1, right: 1}
            },
            // enable autoScroll
            autoScroll: true,
            // call this function on every dragmove event
            onmove: dragMoveListener,
            // call this function on every dragend event
            onend: function (event) {
                var textEl = event.target.querySelector('p');
                textEl && (textEl.textContent =
                    'moved a distance of '
                    + (Math.sqrt(event.dx * event.dx +
                        event.dy * event.dy) | 0) + 'px');
            }
        });
    function dragMoveListener(event) {
        var target = event.target,
            // keep the dragged position in the data-x/data-y attributes
            x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
            y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
        // translate the element
        target.style.webkitTransform =
            target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';
        // update the posiion attributes
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
    }
    // this is used later in the resizing and gesture demos
    window.dragMoveListener = dragMoveListener;
</script>